Medžio vaizdas: hierarchinių duomenų naršymo prieinamumas

Medžio vaizdai yra esminiai naudotojo sąsajos (UI) komponentai, skirti hierarchiniams duomenims rodyti. Jie leidžia naudotojams intuityviai naršyti sudėtingas struktūras, tokias kaip failų sistemos, organizacinės schemos ar svetainių meniu. Tačiau prastai įgyvendintas medžio vaizdas gali sukelti didelių prieinamumo kliūčių, ypač naudotojams su negalia, kurie pasikliauja pagalbinėmis technologijomis, tokiomis kaip ekrano skaitytuvai ir naršymas klaviatūra. Šiame straipsnyje pateikiamas išsamus vadovas, kaip kurti ir įgyvendinti prieinamus medžio vaizdus, užtikrinant teigiamą naudotojo patirtį visiems.

Medžio vaizdo struktūros supratimas

Medžio vaizdas pateikia duomenis hierarchiniu, išskleidžiamu / suskleidžiamu formatu. Kiekvienas medis mazgas gali turėti antrinių mazgų, taip sukuriant šakas ir pošakius. Aukščiausias mazgas vadinamas šakniniu mazgu. Prieš gilinantis į prieinamumo aspektus, labai svarbu suprasti pagrindinę struktūrą.

Štai įprastų medžio vaizdo elementų apžvalga:

• Medis: Bendras konteinerio elementas, talpinantis visą medžio struktūrą.
• Medžio elementas (Treeitem): Atstovauja vienam mazgui medyje. Tai gali būti šaka (išskleidžiama / suskleidžiama) arba lapas (be vaikų).
• Grupė: (Nebūtina) Konteineris, kuris vizualiai grupuoja antrinius medžio elementus tėviniame medžio elemente.
• Perjungiklis / atskleidimo piktograma: Vizualus indikatorius (pvz., pliuso ar minuso ženklas, rodyklė), leidžiantis naudotojams išskleisti ar suskleisti šaką.
• Etiketė: Tekstas, rodomas kiekvienam medžio elementui.

ARIA vaidmenų ir atributų svarba

Prieinamos turtingos interneto programos (ARIA) yra atributų rinkinys, kuris prideda semantinę prasmę HTML elementams, padarydamas juos suprantamus pagalbinėms technologijoms. Kuriant medžio vaizdus, ARIA vaidmenys ir atributai yra labai svarbūs perduodant medžio struktūrą ir elgseną ekrano skaitytuvams.

Esminiai ARIA vaidmenys:

• role="tree": Taikoma konteinerio elementui, kuris atstovauja visam medžiui. Tai informuoja pagalbines technologijas, kad elemente yra hierarchinis sąrašas.
• role="treeitem": Taikoma kiekvienam medžio mazgui. Tai identifikuoja kiekvieną mazgą kaip elemento medyje dalį.
• role="group": Taikoma konteinerio elementui, kuris vizualiai grupuoja antrinius medžio elementus. Nors ne visada būtina, tai gali pagerinti semantiką.

Pagrindiniai ARIA atributai:

• aria-expanded="true|false": Taikoma medžio elementams, turintiems vaikų. Nurodo, ar šaka šiuo metu yra išskleista (true), ar suskleista (false). Dinamiškai atnaujinkite šį atributą naudodami JavaScript, kai naudotojas išskleidžia ar suskleidžia mazgą.
• aria-selected="true|false": Taikoma medžio elementams, nurodant, ar mazgas šiuo metu yra pasirinktas. Vienu metu turėtų būti pasirinktas tik vienas mazgas (nebent jūsų programai reikalingas kelių elementų pasirinkimas, tokiu atveju naudokite aria-multiselectable="true" ant role="tree" elemento).
• aria-label="[etiketės tekstas]" arba aria-labelledby="[etiketės elemento ID]": Suteikia aprašomąją etiketę medžiui ar atskiriems medžio elementams. Naudokite aria-label, jei etiketė nėra vizualiai matoma; kitu atveju, naudokite aria-labelledby, kad susietumėte medžio elementą su jo vizualia etikete.
• tabindex="0": Taikoma pradiniam fokusuotam medžio elementui (dažniausiai pirmajam). Naudokite tabindex="-1" visiems kitiems medžio elementams, kol jie nebus fokusuoti (pvz., naršant klaviatūra). Tai užtikrina tinkamą naršymo klaviatūra eigą.

ARIA įgyvendinimo pavyzdys:

Štai pagrindinis pavyzdys, kaip struktūrizuoti medžio vaizdą su ARIA atributais:

<ul role="tree" aria-label="Failų sistema"> <li role="treeitem" aria-expanded="true" aria-selected="false" tabindex="0"> <span>Pagrindinis aplankas</span> <ul role="group"> <li role="treeitem" aria-expanded="false" aria-selected="false" tabindex="-1"> <span>Aplankas 1</span> <ul role="group"> <li role="treeitem" aria-selected="false" tabindex="-1"><span>Failas 1.txt</span></li> <li role="treeitem" aria-selected="false" tabindex="-1"><span>Failas 2.txt</span></li> </ul> </li> <li role="treeitem" aria-selected="false" tabindex="-1"><span>Aplankas 2</span></li> </ul> </li> </ul>

Naršymas klaviatūra

Naršymas klaviatūra yra itin svarbus naudotojams, kurie negali naudotis pele. Gerai suprojektuotas medžio vaizdas turėtų būti visiškai naršomas naudojant tik klaviatūrą. Štai standartinės klaviatūros sąveikos:

• Rodyklė aukštyn: Perkelia fokusą į ankstesnį medžio mazgą.
• Rodyklė žemyn: Perkelia fokusą į kitą medžio mazgą.
• Rodyklė kairėn:
  • Jei mazgas yra išskleistas, jį suskleidžia.
  • Jei mazgas yra suskleistas arba neturi vaikų, perkelia fokusą į mazgo tėvinį elementą.
• Rodyklė dešinėn:
  • Jei mazgas yra suskleistas, jį išskleidžia.
  • Jei mazgas yra išskleistas, perkelia fokusą į pirmąjį vaiką.
• Home: Perkelia fokusą į pirmąjį medžio mazgą.
• End: Perkelia fokusą į paskutinį matomą medžio mazgą.
• Tarpas arba Enter: Pasirenka fokusuotą mazgą (jei pasirinkimas palaikomas).
• Rašymas (raidė arba skaičius): Perkelia fokusą į kitą mazgą, kuris prasideda įvestu simboliu. Tęsia paiešką su kiekvienu sekančiu klavišo paspaudimu.
• Pliusas (+): Išskleidžia šiuo metu fokusuotą mazgą (atitinka Rodyklę dešinėn, kai mazgas suskleistas).
• Minusas (-): Suskleidžia šiuo metu fokusuotą mazgą (atitinka Rodyklę kairėn, kai mazgas išskleistas).
• Žvaigždutė (*): Išskleidžia visus dabartinio lygio mazgus (nėra visuotinai palaikoma, bet dažnai naudinga).

JavaScript įgyvendinimas naršymui klaviatūra:

Jums reikės JavaScript, kad apdorotumėte klaviatūros įvykius ir atitinkamai atnaujintumėte fokusą. Štai supaprastintas pavyzdys:

const tree = document.querySelector('[role="tree"]'); const treeitems = document.querySelectorAll('[role="treeitem"]'); tree.addEventListener('keydown', (event) => { const focusedElement = document.activeElement; let nextElement; switch (event.key) { case 'ArrowUp': event.preventDefault(); // Neleidžia slinkti puslapio // Logika, skirta rasti ankstesnį medžio elementą (reikia pereiti per DOM) // ... nextElement = findPreviousTreeitem(focusedElement); break; case 'ArrowDown': event.preventDefault(); // Logika, skirta rasti kitą medžio elementą // ... nextElement = findNextTreeitem(focusedElement); break; case 'ArrowLeft': event.preventDefault(); if (focusedElement.getAttribute('aria-expanded') === 'true') { // Suskleisti mazgą focusedElement.setAttribute('aria-expanded', 'false'); } else { // Perkelti fokusą į tėvinį elementą nextElement = findParentTreeitem(focusedElement); } break; case 'ArrowRight': event.preventDefault(); if (focusedElement.getAttribute('aria-expanded') === 'false') { // Išskleisti mazgą focusedElement.setAttribute('aria-expanded', 'true'); } else { // Perkelti fokusą į pirmąjį vaiką nextElement = findFirstChildTreeitem(focusedElement); } break; case 'Home': event.preventDefault(); nextElement = treeitems[0]; break; case 'End': event.preventDefault(); nextElement = treeitems[treeitems.length - 1]; break; case ' ': // Tarpas case 'Enter': event.preventDefault(); // Logika, skirta pasirinkti fokusuotą mazgą selectNode(focusedElement); break; default: // Tvarkyti simbolių įvedimą, norint naršyti į mazgus, prasidedančius tuo simboliu break; } if (nextElement) { focusedElement.setAttribute('tabindex', '-1'); nextElement.setAttribute('tabindex', '0'); nextElement.focus(); } });

Svarbūs aspektai įgyvendinant naršymą klaviatūra:

• Fokuso valdymas: Visada užtikrinkite, kad tik vienas medžio elementas vienu metu turėtų tabindex="0". Perkeliaujant fokusą, atitinkamai atnaujinkite tabindex atributus.
• DOM perėjimas: Efektyviai pereikite per DOM, kad rastumėte kitus ir ankstesnius medžio elementus, tėvinius mazgus ir antrinius mazgus. Apsvarstykite galimybę naudoti pagalbines funkcijas šiam procesui supaprastinti.
• Įvykių prevencija: Naudokite event.preventDefault(), kad naršyklė neatliktų numatytųjų veiksmų (pvz., slinkimo), kai tvarkomi rodyklių klavišai.
• Simbolių įvedimas: Įgyvendinkite logiką, skirtą tvarkyti simbolių įvedimą, leidžiančią naudotojams greitai pereiti prie mazgų, prasidedančių konkrečiu simboliu. Išsaugokite paskutinio klavišo paspaudimo laiką, kad nuspręstumėte, kada paieškos eilutė turėtų būti išvalyta.

Vizualinis dizainas ir prieinamumas

Vizualinis dizainas atlieka lemiamą vaidmenį medžio vaizdų naudojamumui ir prieinamumui. Štai keletas gairių:

• Aiški vizualinė hierarchija: Naudokite įtraukas ir vizualius ženklus (pvz., skirtingas piktogramas aplankams ir failams), kad aiškiai parodytumėte medžio hierarchiją.
• Pakankamas spalvų kontrastas: Užtikrinkite pakankamą spalvų kontrastą tarp teksto ir fono bei tarp skirtingų medžio vaizdo elementų. Naudokite įrankius, tokius kaip WebAIM Contrast Checker, kad patikrintumėte kontrasto santykius.
• Fokuso indikacija: Pateikite aiškų ir matomą fokuso indikatorių šiuo metu fokusuotam medžio elementui. Tai būtina klaviatūros naudotojams. Nesiremkite vien spalva; apsvarstykite galimybę naudoti rėmelį, kontūrą ar fono pakeitimą.
• Išskleidimo / suskleidimo indikatoriai: Naudokite aiškias ir suprantamas piktogramas išskleidimo / suskleidimo indikatoriams (pvz., pliuso / minuso ženklus, rodykles). Užtikrinkite, kad šios piktogramos turėtų pakankamą kontrastą ir būtų pakankamai didelės, kad jas būtų lengva paspausti.
• Venkite naudoti tik spalvą informacijai perteikti: Nesiremkite vien spalva, kad nurodytumėte medžio elemento būseną (pvz., pasirinktas, išskleistas, klaida). Pateikite alternatyvius vizualius ženklus, tokius kaip tekstinės etiketės ar piktogramos.

Ekrano skaitytuvų aspektai

Ekrano skaitytuvų naudotojai pasikliauja ARIA atributais ir naršymu klaviatūra, kad suprastų ir sąveikautų su medžio vaizdais. Štai keletas pagrindinių aspektų, susijusių su ekrano skaitytuvų prieinamumu:

• Aprašomosios etiketės: Naudokite aria-label arba aria-labelledby, kad pateiktumėte aprašomąsias etiketes medžiui ir atskiriems medžio elementams. Šios etiketės turėtų būti glaustos ir informatyvios.
• Būsenos pranešimai: Užtikrinkite, kad būsenos pokyčiai (pvz., mazgo išskleidimas / suskleidimas, mazgo pasirinkimas) būtų tinkamai pranešami ekrano skaitytuvo. Tai pasiekiama teisingai atnaujinant aria-expanded ir aria-selected atributus.
• Hierarchijos pranešimai: Ekrano skaitytuvai turėtų pranešti apie kiekvieno mazgo lygį hierarchijoje (pvz., „2 lygis, Aplankas 1“). Dauguma ekrano skaitytuvų tai tvarko automatiškai, kai ARIA vaidmenys yra teisingai įgyvendinti.
• Naršymo klaviatūra nuoseklumas: Užtikrinkite, kad naršymas klaviatūra būtų nuoseklus ir nuspėjamas skirtingose naršyklėse ir su skirtingais ekrano skaitytuvais. Išbandykite savo medžio vaizdą su keliais ekrano skaitytuvais (pvz., NVDA, JAWS, VoiceOver), kad nustatytumėte ir išspręstumėte bet kokius neatitikimus.
• Progresyvus tobulinimas: Jei JavaScript yra išjungtas, medžio vaizdas vis tiek turėtų būti prieinamas, nors ir prastesnės būklės. Apsvarstykite galimybę naudoti semantinį HTML (pvz., įdėtus sąrašus), kad suteiktumėte pagrindinį prieinamumo lygį net ir be JavaScript.

Suderinamumas tarp naršyklių

Prieinamumas turėtų būti nuoseklus skirtingose naršyklėse ir operacinėse sistemose. Kruopščiai išbandykite savo medžio vaizdą su:

• Stacionarių kompiuterių naršyklėmis: Chrome, Firefox, Safari, Edge
• Mobiliosiomis naršyklėmis: Chrome (Android ir iOS), Safari (iOS)
• Operacinėmis sistemomis: Windows, macOS, Linux, Android, iOS
• Ekrano skaitytuvais: NVDA (Windows), JAWS (Windows), VoiceOver (macOS ir iOS)

Naudokite naršyklės kūrėjo įrankius, kad patikrintumėte ARIA atributus ir klaviatūros elgseną. Atkreipkite dėmesį į bet kokius neatitikimus ar atvaizdavimo problemas.

Testavimas ir patvirtinimas

Reguliarus testavimas yra būtinas norint užtikrinti jūsų medžio vaizdo prieinamumą. Štai keletas testavimo metodų:

• Rankinis testavimas: Naudokite ekrano skaitytuvą ir klaviatūrą, kad naršytumėte medžio vaizdą ir patikrintumėte, ar visos funkcijos yra prieinamos.
• Automatizuotas testavimas: Naudokite prieinamumo testavimo įrankius (pvz., axe DevTools, WAVE), kad nustatytumėte galimas prieinamumo problemas.
• Naudotojų testavimas: Įtraukite naudotojus su negalia į testavimo procesą, kad gautumėte realaus pasaulio atsiliepimų apie jūsų medžio vaizdo prieinamumą.
• WCAG atitiktis: Siekite atitikti žiniatinklio turinio prieinamumo gaires (WCAG) 2.1 AA lygį. WCAG pateikia tarptautiniu mastu pripažintų gairių rinkinį, kaip padaryti interneto turinį prieinamesnį.

Geriausios prieinamų medžio vaizdų praktikos

Štai keletas geriausių praktikų, kurių reikia laikytis kuriant ir įgyvendinant prieinamus medžio vaizdus:

• Pradėkite nuo semantinio HTML: Naudokite semantinius HTML elementus (pvz., <ul>, <li>), kad sukurtumėte pagrindinę medžio vaizdo struktūrą.
• Taikykite ARIA vaidmenis ir atributus: Naudokite ARIA vaidmenis ir atributus, kad pridėtumėte semantinę prasmę ir suteiktumėte informaciją pagalbinėms technologijoms.
• Įgyvendinkite patikimą naršymą klaviatūra: Užtikrinkite, kad medžio vaizdas būtų visiškai naršomas naudojant tik klaviatūrą.
• Pateikite aiškius vizualius ženklus: Naudokite vizualinį dizainą, kad aiškiai parodytumėte medžio vaizdo hierarchiją, būseną ir fokusą.
• Testuokite su ekrano skaitytuvais: Išbandykite medžio vaizdą su keliais ekrano skaitytuvais, kad patikrintumėte, ar jis prieinamas ekrano skaitytuvų naudotojams.
• Patvirtinkite WCAG atitiktį: Patvirtinkite medžio vaizdo atitiktį WCAG gairėms, kad užtikrintumėte, jog jis atitinka prieinamumo standartus.
• Dokumentuokite savo kodą: Aiškiai dokumentuokite savo kodą, paaiškindami kiekvieno ARIA atributo ir klaviatūros įvykių tvarkyklės paskirtį.
• Naudokite biblioteką ar karkasą (atsargiai): Apsvarstykite galimybę naudoti iš anksto sukurtą medžio vaizdo komponentą iš patikimos UI bibliotekos ar karkaso. Tačiau atidžiai peržiūrėkite komponento prieinamumo funkcijas ir įsitikinkite, kad jis atitinka jūsų reikalavimus. Visada kruopščiai testuokite!

Pažangesni aspektai

• Tingusis įkėlimas (Lazy Loading): Labai dideliems medžiams įgyvendinkite tingųjį įkėlimą, kad mazgai būtų įkeliami tik tada, kai jų prireikia. Tai gali pagerinti našumą ir sumažinti pradinį įkėlimo laiką. Užtikrinkite, kad tingusis įkėlimas būtų įgyvendintas prieinamu būdu, teikiant tinkamą grįžtamąjį ryšį naudotojui, kol mazgai įkeliami. Naudokite ARIA „live regions“, kad praneštumėte apie įkėlimo būseną.
• Vilkimas ir nuleidimas (Drag and Drop): Jei jūsų medžio vaizdas palaiko vilkimo ir nuleidimo funkciją, užtikrinkite, kad ji būtų prieinama ir klaviatūros bei ekrano skaitytuvų naudotojams. Pateikite alternatyvias klaviatūros komandas mazgų vilkimui ir nuleidimui.
• Kontekstiniai meniu: Jei jūsų medžio vaizde yra kontekstinių meniu, užtikrinkite, kad jie būtų prieinami klaviatūros ir ekrano skaitytuvų naudotojams. Naudokite ARIA atributus, kad identifikuotumėte kontekstinį meniu ir jo parinktis.
• Globalizacija ir lokalizacija: Kurkite medžio vaizdą taip, kad jį būtų lengva lokalizuoti skirtingoms kalboms ir kultūroms. Atsižvelkite į skirtingų teksto krypčių (pvz., iš dešinės į kairę) poveikį vizualiniam išdėstymui ir naršymui klaviatūra.

Išvada

Prieinamų medžio vaizdų kūrimas reikalauja kruopštaus planavimo ir įgyvendinimo. Laikydamiesi šiame straipsnyje pateiktų gairių, galite užtikrinti, kad jūsų medžio vaizdai būtų naudojami ir prieinami visiems naudotojams, įskaitant tuos, kurie turi negalią. Atminkite, kad prieinamumas yra ne tik techninis reikalavimas; tai pagrindinis įtraukiojo dizaino principas.

Suteikdami prioritetą prieinamumui, galite sukurti geresnę naudotojo patirtį visiems, nepaisant jų gebėjimų. Svarbu reguliariai testuoti ir tikrinti savo kodą. Sekite naujausius prieinamumo standartus ir geriausias praktikas, kad sukurtumėte tikrai įtraukias naudotojo sąsajas.